
import 'package:flutter/material.dart';
import 'package:flutter_deer/account/page/below_user_score_list_page.dart';
import 'package:flutter_deer/account/provider/below_user_provider.dart';
import 'package:flutter_deer/res/resources.dart';
import 'package:flutter_deer/util/other_utils.dart';
import 'package:flutter_deer/util/theme_utils.dart';
import 'package:flutter_deer/widgets/my_app_bar.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/deer_localizations.dart';
import '../account_router.dart';

class BelowUserPage extends StatefulWidget {

  final String? username;
  const BelowUserPage({super.key,required this.username});

  @override
  _BelowUserPageState createState() => _BelowUserPageState();
}

class _BelowUserPageState extends State<BelowUserPage> with AutomaticKeepAliveClientMixin<BelowUserPage>,SingleTickerProviderStateMixin {

  final GlobalKey _bodyKey = GlobalKey();
  TabController? _tabController;
  final PageController _pageController = PageController();
  BelowUserProvider provider = BelowUserProvider();
  List<BelowUserScoreListListPage> pages = [];

  @override
  bool get wantKeepAlive => false;

  @override
  void initState() {
    super.initState();
    pages = [BelowUserScoreListListPage(index: 0,username: widget.username.nullSafe,),BelowUserScoreListListPage(index: 1,username: widget.username.nullSafe,)];
    _tabController = TabController(vsync: this, length: 2);
  }

  @override
  void dispose() {
    // provider.dispose();
    _tabController?.dispose();
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  void _onPageChange(int index) {
    if(!mounted){
      return;
    }
    provider.setIndex(index);
    _tabController?.animateTo(index);
    _pageController.jumpToPage(index);
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    final Color? iconColor = ThemeUtils.getIconColor(context);
    return ChangeNotifierProvider<BelowUserProvider>(
        create: (_) => provider,
        child: Scaffold(
        appBar: MyAppBar(
        centerTitle: '${DeerLocalizations.of(context)!.rechargeWithdrawalRecords.nullSafe}'
    ),
    body: Column(
    key: _bodyKey,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        // 隐藏点击效果
        padding: const EdgeInsets.only(left: 0.0,right: 0.0),
        color: context.backgroundColor,
        child: TabBar(
          onTap: (index) {
            if (!mounted) {
              return;
            }
            _pageController.jumpToPage(index);
          },
          isScrollable: false,
          controller: _tabController,
          labelStyle: TextStyles.textBold18,
          indicatorSize: TabBarIndicatorSize.label,
          labelPadding: EdgeInsets.zero,
          unselectedLabelColor: context.isDark ? Colours.text_gray : Colours.text,
          labelColor: Theme.of(context).primaryColor,
          indicatorPadding: const EdgeInsets.only(right: 16,left: 16),
          tabs: <Widget>[
            _TabView('${DeerLocalizations.of(context)!.rechargeRecord.nullSafe}', 0),
            _TabView('${DeerLocalizations.of(context)!.withdrawRecord.nullSafe}', 1)
          ],
        ),
      ),
      Gaps.line,
      Expanded(
          child: PageView.builder(
              key: const Key('pageView'),
              itemCount: 2,
              onPageChanged: _onPageChange,
              controller: _pageController,
              itemBuilder: (_, int index) => pages.elementAt(index)
          )
      )
    ],
    )
    ));
  }
}

class _TabView extends StatelessWidget {

  const _TabView(this.tabName, this.index);

  final String tabName;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Tab(
      child: SizedBox(
        width: MediaQuery.sizeOf(context).width/2-36,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(tabName)
          ],
        ),
      ),
    );
  }
}